<template>
	<view class="">
		<scroll-view style="padding: 0 30rpx; height: calc(100vh - 130rpx)" scroll-y>
			<view class="top flex">
				<text style="font-size: 30rpx; color: #999">桌号</text>
				<text style="font-size: 50rpx; font-weigh: 600; margin-top: 30rpx">{{ foodInfo.deskName }}</text>
			</view>

			<!-- 产品列表 begin-->
			<view class="foods">
				<view style="display: flex; align-items: center; height: 80rpx; border-bottom: 1rpx solid #e2e2e2">
					<text style="font-size: 28rpx; font-weight: 600">{{ foodInfo.storeName }}</text>
					<!-- <text class="fsize-24 line-gray mt-12">{{orderdes.address}}</text> -->
				</view>
				<view style="margin-top: 30rpx">
					<view class="flex" style="justify-content: space-between; margin-bottom: 30rpx" v-for="item in foodInfo.foodData" :key="item.id">
						<view class="flex">
							<image class="shrink0" style="width: 88rpx; height: 88rpx" :src="item.foodImage"></image>
							<view style="margin-left: 10rpx">
								<view style="font-sizw: 28rpx; font-weight: 500">{{ item.foodName }}</view>
								<view style="font-size: 24rpx; margin-top: 10rpx; color: #999">{{ item.specName }} {{ item.feedTasteNames }}</view>
							</view>
						</view>
						<view style="display: flex; justify-content: space-between; align-items: flex-end; flex-direction: column; margin-left: 10rpx">
							<view>
								<text class="fsize-20">￥</text>
								<!-- <text class="fsize-28" v-if="!deskId">{{ item.realPrice }}</text> -->
								<text class="fsize-28">{{ item.allAmount }}</text>
							</view>
							<view style="font-size: 26rpx; color: #999">x{{ item.quantity }}</view>
						</view>
					</view>
					<view style="border-top: 2rpx solid #e2e2e2; padding: 30rpx 0; text-align: right">
						<text style="font-size: 26rpx">共{{ foodInfo.foodData ? foodInfo.foodData.length : 0 }}件商品，合计</text>
						<text style="margin-left: 10rpx; font-size: 30rpx; font-weight: 600">￥</text>
						<text style="font-size: 40rpx; font-weight: 600">{{ foodInfo.sumAllAmount }}</text>
					</view>
				</view>
			</view>
			<!-- 产品列表 end -->
			<!-- 其他信息 begin-->
			<view class="pay-info">
				<view style="display: flex; justify-content: space-between; align-items: center; font-size: 26rpx; padding: 20rpx 0">
					<text class="line-gray">支付状态</text>
					<text>{{ foodInfo.stateName }}</text>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; font-size: 26rpx; padding: 20rpx 0">
					<text class="line-gray">支付方式</text>
					<text>{{ foodInfo.paymentName }}</text>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; font-size: 26rpx; padding: 20rpx 0">
					<text class="line-gray">订单编号</text>
					<text>{{ foodInfo.orderNo }}</text>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; font-size: 26rpx; padding: 20rpx 0">
					<text class="line-gray">下单时间</text>
					<text>{{ foodInfo.orderDate }}</text>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: center; font-size: 26rpx; padding: 20rpx 0">
					<text class="line-gray">订单类型</text>
					<text>{{ foodInfo.ordertype === 2 ? '外带订单' : '堂食订单' }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="checkout-btn" v-if="foodInfo.status === 1">
			<view class="btn" @click="onCheckout">退款</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			foodInfo: {}
		};
	},
	onLoad({ row }) {
		const item = JSON.parse(row);
		this.getFoodsDetail(item.orderId);
	},
	methods: {
		async getFoodsDetail(id) {
			const res = await this.$api.GetFoodDetail({ id });
			this.foodInfo = res.data;
		},
		onCheckout() {
			const _that = this;
			uni.showModal({
				title: '温馨提示',
				content: '确认退款吗？',
				async success(res) {
					if (res.confirm) {
						await _that.$api.CheckoutFood({ id: _that.foodInfo.orderId });
						uni.showToast({
							icon: 'success',
							title: '退款成功',
							success() {
								uni.navigateBack();
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.top {
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	padding: 30rpx;
	margin-top: 30rpx;
}
.foods {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 30rpx;
	padding-top: 0;
	margin-top: 30rpx;
}
.pay-info {
	background-color: #fff;
	border-radius: 10rpx;
	margin-top: 30rpx;
	padding: 20rpx 30rpx;
	.line-gray {
		color: #999;
		border-radius: 10rpx;
	}
}
.checkout-btn {
	height: 130rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	.btn {
		width: 33%;
		height: 80rpx;
		background-color: #f3c45d;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
	}
}
</style>
